<template>
  <div class="cus_search_form searchAdapt-Four">
    <SelfAdaption>
      <Form
        ref="searchForm"
        slot="adaption-bar"
        id="search_form"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
        :label-width="labelWidth"
      >
        <template>
          <Form-item
            v-for="(item, index) in formData"
            :key="index"
            :label="item.fieldName">
            <Input
              v-if="item.type === 'input'"
              type="text"
              @keyup.enter.native="searchInfo"
              v-model="item.value" :placeholder="item.placeholder" >
            </Input>
            <Select v-if="item.type === 'select'" v-model="item.value" clearable :multiple="item.isMul ? item.isMul :false" >
              <Option v-for="item in item.optionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <DatePicker
              type="date"
              v-if="item.type === 'date'"
              @on-change="dateHandle($event, item)"
              :transfer="true"
              :editable="false"
              :clearable="true"
              v-model="item.value"
              placement="bottom-end"
              style="width: 100%;"
              size="small"
              :placeholder="item.placeholder">
            </DatePicker>
          </Form-item>

          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchInfo" />
            <RPButton optType="reset" @click="formReset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
  </div>
</template>

<script>
export default {
  name: "SearchForm",
  props: {
    formData: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: Number,
      default: 112
    }
  },
  methods: {
    formReset() {
      this.$emit('reset')
    },
    searchInfo() {
      this.$emit('search')
    },
    dateHandle(e, item) {
      if (item.aliasField === 'endDate') {
        item[item.aliasField] = new Date(e + ' 23:59:59').getTime()
      } else {
        item[item.aliasField] = new Date(e).getTime() - 8 * 3600 * 1000
      }
    }
  }
};
</script>

<style scoped lang="less">
.cus_search_form{
  #search_form{
    /deep/ .ivu-form-item-content{
      margin-left: 5px !important;
      width: inherit !important;
  }
    //overflow-x: hidden;
  }
  /deep/ .ivu-form-item-label{
    max-width: none !important;
  }
}
</style>
